<template>
	<view class="good-detail">
		<NavBar :isBack="true" iconColor="#fff" :isHeight="false"></NavBar>
		<view class="content">
			<view class="swiper-area">
				<swiper class="top-swiper" :current="current" :circular="true" @change="swiperChange" :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for='(item, index) in bannerList' :key='index'>
						<image class="top-swiper" :src="item.image" @click="gomeetplace(item)" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper>
				<view class="dots">
					{{ current + 1 }}/{{ bannerList.length }}
				</view>
			</view>
			<view class="good-mian-area">
				<view class="header-main">
					<view class="price">¥ {{ detail.price }}</view>
					<view class="good-text">
						<view class="tag">好物</view>
						<view class="title">
							{{ detail.title }}
						</view>
					</view>
					<view class="regulation">
						<view class="pattern" @click="show = true">
							<view class="left">
								<view class="title">选择</view>
								<view>{{ styleDetail.name }}，{{ detail.num }}件</view>
							</view>
							<image src="@/static/goodDetail/back.png" class="back"></image>
						</view>
						<view class="address">
							<view class="distribution">
								<view class="left">
									<view class="title">配送</view>
									<view class="left">
										<image class="site" src="@/static/goodDetail/site.png"></image>
										<view class="text">长沙市岳麓区麓谷街道青山镇1109...</view>
									</view>
								</view>
								<image src="@/static/goodDetail/back.png" class="back"></image>
							</view>
							<view class="delivery-time">现货，11:00前下单，预计今天（04月22日）送达</view>
						</view>
					</view>
				</view>
				<view class="footer-detail">
					<view class="title">商品详情</view>
					<view class="images">
						<image :src="detail.cover" mode="aspectFill"></image>
					</view>
					<!-- <image :src="item.image" v-for="(item, index) in bannerList" :key="index"></image> -->
				</view>
			</view>
		</view>
		<view class="footer-btn-area" @click="show = true">
			<view>立即购买</view>
		</view>
		<payDetail v-model="show" :styleList="styleList" :detail="detail" @change="handleStyleChange" />
	</view>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'
import payDetail from './components/payDetail'
import { onLoad } from "@dcloudio/uni-app"
import { getDetails, getShopstyle } from '@/api/index'
const state = reactive({
	show: false,
	detail: {},
	styleDetail: {},
	styleList: [],
	bannerList: [{
		id: 1,
		image: '/static/goodDetail/demo.png'
	}, {
		id: 2,
		image: '/static/goodDetail/demo.png'
	}, {
		id: 3,
		image: '/static/goodDetail/demo.png'
	}, {
		id: 4,
		image: '/static/goodDetail/demo.png'
	}, {
		id: 5,
		image: '/static/goodDetail/demo.png'
	}],
	current: 0,
})

const popupRef = ref(null)

function swiperChange (e) { //当前指示位置
	state.current = e.detail.current
}

function toPay () {
	uni.navigateTo({
		url: "/pages/order/confirmOrder"
	})
}
//获取详情
function getDetailData (id) {
	getDetails({ id }).then(res => {
		state.detail = res.data
	})
}
//获取商品型号
function getShopstyleData (id) {
	getShopstyle({ id: id }).then(res => {
		state.styleList = res.data
		state.styleDetail = res.data[0]
	})
}
//选择商品型号
function handleStyleChange (item) {
	state.styleDetail = item
}
//初始化
onLoad((e) => {
	getDetailData(e.id)
	getShopstyleData(e.id)
})
const {
	bannerList,
	current,
	detail,
	styleDetail,
	styleList,
	show
} = toRefs(state)
</script>

<style lang="scss" scoped>
.good-detail {
	.content {
		.swiper-area {
			position: relative;

			.top-swiper {
				width: 750rpx;
				height: 750rpx;
			}

			.dots {
				width: 85rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 111rpx;
				position: absolute;
				bottom: 80rpx;
				right: 36rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.good-mian-area {

			background: #F5F5F5;
			border-radius: 22rpx 22rpx 0rpx 0rpx;
			position: relative;
			top: -27rpx;

			.header-main {
				padding: 36rpx 36rpx 0rpx;
			}

			.price {
				font-weight: 800;
				font-size: 48rpx;
				color: #FF0000;
				margin-bottom: 18rpx;

			}

			.good-text {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;
				position: relative;

				.tag {
					text-align: center;
					width: 60rpx;
					height: 36rpx;
					line-height: 36rpx;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					background: #58DBCF;
					border-radius: 8rpx;
					margin-right: 5rpx;
				}


			}

			.regulation {
				width: 678rpx;
				height: 252rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				margin: 36rpx 0rpx 44rpx;
				padding: 44rpx 24rpx 44rpx 30rpx;
				box-sizing: border-box;

				.title {
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					margin-right: 26rpx;
				}

				.pattern {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #000000;
					margin-bottom: 44rpx;

					.left {
						display: flex;
						align-items: center;
					}
				}

				.address {
					.distribution {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						color: #666666;

						.left {
							display: flex;
							align-items: center;

							.text {
								// width: 421rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								flex: 1;
							}
						}

						.site {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}

					.delivery-time {
						margin-left: 75rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 14rpx;
					}

				}

				.back {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.footer-detail {
			padding-bottom: 150rpx;

			.title {
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				margin: 0rpx 0rpx 25rpx 53rpx;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: -12rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 3rpx;
					height: 22rpx;
					background-color: #58DBCF;
				}
			}

			.images {
				text-align: center;

				image {
					height: 750rpx;
					width: 750rpx;
				}
			}

		}
	}

	.footer-btn-area {
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: flex-end;

		view {
			width: 192rpx;
			height: 66rpx;
			background: #58DBCF;
			border-radius: 500rpx;
			font-weight: 800;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 66rpx;
			text-align: center;
			margin: 16rpx 36rpx;
		}
	}


}
</style>